import React from 'react';
import { Select, Row, Col } from 'antd';
// import Symbol from './Symbol';
import PopValue from '../PopTab/PopValue';
import { compare } from '../../utils/compare';
import { PARAMETER_TYPE } from '../../utils/constant';
import './index.less';

export default function ActionSet(props) {
  const value = props.value || {};

  const handleChange = (e) => {
    props.onChange && props.onChange(props.options.find((item) => item.code === e));
  };

  // 参数设置回调
  const handleParamChange = (index, e) => {
    const param = value.parameters[index];
    param.var_code = e.var_code;
    param.var_type = e.var_type;
    if (e.event_id) param.event_id = e.event_id;
    props.onChange && props.onChange(Object.assign({}, value));
  };

  const handleSelectParamChange = (index, e) => {
    const param = value.parameters[index];
    param.var_code = e;
    param.var_type = 'literal';
    props.onChange && props.onChange(Object.assign({}, value));
  };

  return (
    <div className='action-set'>
      <Row type='flex' style={{ marginBottom: '10px', lineHeight: '48px' }}>
        <Col span={12}>
          <Row type='flex'>
            <Col span={6} />
            <Col span={16}>
              <Select
                onChange={handleChange}
                disabled={props.disabled}
                value={value.code}
                className='action-set-selection'
                style={{
                  width: '200px',
                  position: 'relative',
                  zIndex: '2',
                  ...compare(props, 'code'),
                }}
              >
                {props.options.map((item) => {
                  return (
                    <Select.Option key={item.code} value={item.code}>
                      {item.name}
                    </Select.Option>
                  );
                })}
              </Select>
            </Col>
          </Row>
        </Col>
      </Row>
      {value.parameters && (
        <Row type='flex' style={{ marginTop: '10px' }} gutter={10}>
          <Col span={5}>
            <div className='params-text'>
              <i />
              <span>*参数</span>
            </div>
          </Col>
          <Col>
            {value.parameters.map((item, i) => {
              return (
                <div className='flex' key={i} style={i !== 0 ? { marginTop: 5 } : null}>
                  {item.showType !== '' && item.name && (
                    <span
                      style={{
                        marginRight: '10px',
                      }}
                    >
                      {item.name}:
                    </span>
                  )}
                  {item.showType === '' && (
                    <PopValue
                      style={{ width: '100px', ...compare(props, 'parameters', i) }}
                      limitType={item.varTypeLimit}
                      variable={props.variable}
                      using_variables={props.using_variables}
                      value={item}
                      onChange={(value) => handleParamChange(i, value)}
                      disabled={props.disabled}
                      fieldId={props.fieldId}
                      type={item.var_type}
                    />
                  )}
                  {item.showType === PARAMETER_TYPE._SINGLE && (
                    <Select
                      onChange={(value) => handleSelectParamChange(i, value)}
                      placeholder='请选择'
                      style={{
                        width: '120px',
                        marginRight: '10px',
                        ...compare(props, 'parameters', i, 'var_code'),
                      }}
                      value={item.var_code}
                      disabled={props.disabled}
                    >
                      {item.options.map((it) => (
                        <Select.Option value={it.code} key={it.code}>
                          {it.value}
                        </Select.Option>
                      ))}
                    </Select>
                  )}
                  {item.showType === PARAMETER_TYPE._MULTIPLE && (
                    <Select
                      onChange={(value) => handleSelectParamChange(i, value)}
                      mode='multiple'
                      placeholder='请选择'
                      style={{
                        width: '120px',
                        marginRight: '10px',
                      }}
                      className={compare(props, 'parameters', i, 'var_code')}
                      value={item.var_code && (Array.isArray(item.var_code) ? item.var_code : item.var_code.split(','))}
                      disabled={props.disabled}
                      showArrow={true}
                    >
                      {item.options.map((it) => (
                        <Select.Option value={it.code} key={it.code}>
                          {it.val}
                        </Select.Option>
                      ))}
                    </Select>
                  )}
                  {item.showType === PARAMETER_TYPE._INPUT && (
                    <PopValue
                      {...props}
                      limitType={item.varTypeLimit}
                      variable={props.variable}
                      using_variables={props.using_variables}
                      value={item}
                      disabled={props.disabled}
                      onChange={(value) => handleParamChange(i, value)}
                      style={{
                        width: '120px',
                        marginRight: 10,
                        ...compare(props, 'parameters', i, 'var_code'),
                      }}
                      fieldId={props.fieldId}
                      type={item.var_type}
                    />
                  )}
                  {i === 0 && value.symbol && <div style={{ margin: '0 10px' }}>{value.symbol}</div>}
                </div>
              );
            })}
          </Col>
          {/* <Col span={5}>
            <div className='params-text'>
              <i />
              <span>*参数</span>
            </div>
          </Col>

          {value.parameters.map((item, index) => {
            return (
              <>
                <Col>
                  <PopValue
                    style={{ width: '100px', ...compare(props, 'parameters', index) }}
                    limitType={item.varTypeLimit}
                    variable={props.variable}
                    using_variables={props.using_variables}
                    value={item}
                    onChange={(value) => handleParamChange(index, value)}
                    disabled={props.disabled}
                    fieldId={props.fieldId}
                  />
                </Col>
                {index !== value.parameters.length - 1 && (
                  <Col style={{ textAlign: 'center' }}>
                    <Symbol value={value.symbol} style={compare(props, 'symbol')} />
                  </Col>
                )}
              </>
            );
          })} */}
        </Row>
      )}
    </div>
  );
}
